<template>
	<div class="square-module-section">
		<div class="top-box">
			<div class="left">
				<img class="img" :src="icon" alt="" :style="props.iconStyle"/>
				<span class="title">{{ title }}</span>
			</div>
		</div>
		<el-scrollbar class="el-scrollbar">
			<div class="content">
				<div class="scrollbar-flex-content">
					<div
						class="item"
						:style="{ width: (width?width:(type==='round'?130:230)) + 'px' }"
						:class="item.className"
						v-for="item in showItemList"
						:key="item.name"
						@click="goTo(item.goToUrl,item.goToParams)"
					>
						<div
							class="img-box"
							:style="{
                backgroundColor: item.backgroundColor,
                boxShadow: item.boxShadow,
              }"
						>
							<img :src="item.icon" alt=""/>
						</div>
						<span class="title">{{ item.name }}</span>
						<span :class="`bag ${item.unreadNum.toString().length > 2 ? 'big' : ''}`" v-if="item.unreadNum">{{ item.unreadNum }}</span>
					</div>
				</div>
			</div>
		</el-scrollbar>
	</div>
</template>

<script setup>
const {proxy} = getCurrentInstance();
const props = defineProps({
	title: {
		type: String,
		default: "工作台模块",
	},
	icon: {
		type: String,
	},
	iconStyle: {
		type: Object,
	},
	type: {
		type: String,
		default: 'square'
	},
	width: {
		type: String,
	},
	showItemList: {
		type: Array,
	},
});

const itemBackground = ref([
	{backgroundColor: "#3d7fff", boxShadow: "0px 4px 10px 0px rgba(0, 75, 252, 0.4)"},
	{backgroundColor: "#ff6565", boxShadow: "0px 4px 10px 0px rgba(255, 74, 74, 0.4)"},
	{backgroundColor: "#ff8800", boxShadow: "0px 4px 10px 0px rgba(255, 108, 0, 0.4)"},
	{backgroundColor: "#30d3ba", boxShadow: "0px 4px 10px 0px rgba(69, 206, 195, 0.4)"},
])
const itemClassList = ref(['item--bule', 'item--white', 'item--grey', 'item--red'])

watchEffect(() => {
	let index = 0
	let itemClassIndex = 0
	props.showItemList && props.showItemList.forEach(item => {
		index >= itemBackground.value.length && (index = 0)
		itemClassIndex >= itemClassList.value.length && (itemClassIndex = 0)
		item.backgroundColor = itemBackground.value[index].backgroundColor
		item.boxShadow = itemBackground.value[index++].boxShadow
		item.className = `item-${props.type} ${itemClassList.value[itemClassIndex++]}`
	})
})

function goTo(url, params) {
	if (url.startsWith("http")) {
		window.open(url)
	} else {
		proxy.$router.push({
			path: `${url}`,
			state: params ? {params: {...params}} : {},
		});
	}
};
</script>

<style lang="scss" scoped>
.el-scrollbar {
	padding: 0 0 0 10px;
	overflow: visible;
}

.scrollbar-flex-content {
	display: flex;
	gap: 20px;
	padding-bottom: 12px;
	transition: all 200ms;
}

// 人口管理
.square-module-section {
	background-color: #fff;
	border-radius: 6px;

	.top-box {
		display: flex;
		justify-content: space-between;
		padding: 20px 23px;
		border-bottom: 1px solid #f4f4f4;
		align-items: center;

		.left {
			display: flex;
			align-items: center;
			gap: 10px;

			.title {
				color: #333333;
				font-weight: 600;
			}
		}

		.more {
			font-size: 12px;
			color: #a5a8ab;
			letter-spacing: 1px;
			cursor: pointer;
		}
	}

	.content {
		display: flex;
		gap: 20px;
		padding: 20px 10px;
		padding-bottom: 8px;
		align-items: center;
		/* 通用样式 */
		.item {
			display: flex;
			align-items: center;
			cursor: pointer;
			transition: all 200ms;
			position: relative;
			border-radius: 6px;

			&:hover {
				transform: translateY(-2px);
				box-shadow: 0 8px 12px rgba(0, 0, 0, 0.06);
			}

			&:active {
				transform: translateY(-1px);
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
			}

			.img-box {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					height: 32px;
				}
			}

			.title {
				font-size: 18px;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #333333;
			}

			.bag {
				width: 30px;
				height: 30px;
				background: #ff6565;
				border-radius: 50%;
				line-height: 30px;
				text-align: center;
				color: #fff;
				font-size: 18px;
				font-weight: 600;
				position: absolute;
				right: -8px;
				top: -8px;

				&.big {
					font-size: 16px;
				}
			}
		}

		/* 方形样式 */
		.item-square {
			justify-content: center;
			gap: 20px;
			width: 300px;
			height: 102px;

			.img-box {
				background: #3d7fff;
				box-shadow: 0px 4px 10px 0px rgba(0, 75, 252, 0.4);
			}
		}

		/* 圆形样式 */
		.item-round {
			flex-direction: column;
			justify-content: center;
			gap: 16px;
			height: 132px;
			min-width: 130px;
			background: #f8faff;

			.img-box {
				/* 圆形样式的.img-box不需要额外的背景色和阴影，所以这里可以省略 */
			}
		}

		.item--bule {
			background: #dbefff;

			&:hover {
				background: #aadaff;
			}
		}

		.item--white {
			background: #f8faff;

			&:hover {
				background: #edeff397;
			}
		}

		.item--grey {
			background: #f3f5fa;

			&:hover {
				background: #eff0f4;
			}
		}

		.item--red {
			background: #f9e3e3;

			&:hover {
				background: #ffd3d3;
			}
		}
	}
}

@media screen and (min-width: 1960px) {
	.scrollbar-flex-content {
		gap: 24px;
	}
}
</style>
